<script setup lang="ts">
import {canvas,context} from "../hooks/index"
const {data} = useFetch("/api")
const str1 = ref("")

//refs
const canvasBox = ref(null)

const box1Text = ref("生产管理")
const box1Color = ref("#fff")
const box1Back = ref("linear-gradient(to right,red,yellow)")
const box1Url = ref("/scgl")
const box1Margin = ref(10)

const box2Text = ref("供应链管理")
const box2Color = ref("#fff")
const box2Back = ref("linear-gradient(to right,blue,black")
const box2Url = ref("/gylgl")
const box2Margin = ref(10)

onMounted(()=>{
    str1.value = data.value?.message
    canvasBox.value.append(canvas)
    context.fillRect(100,100,100,100)
})

</script>

<template>
    <div class="">
        <div class="box1">
            <Box1 
            :text="box1Text" 
            :color="box1Color" 
            :back="box1Back"
            :url="box1Url"
            :margin="box1Margin"/>
        </div>
        <div class="box1">
            <Box1 
            :text="box2Text" 
            :color="box2Color" 
            :back="box2Back"
            :url="box2Url"
            :margin="box2Margin"/>
        </div>
    </div>
    <div ref="canvasBox"></div>
</template>

<style scoped>
.box1{
    margin: 10px;
    width: 200px;
    height: 50px;
    display: flex;
}
</style>